<template>
  <div class="notification-view">
    <el-card class="box-card">
      <h2 class="title">留言信息列表</h2>
      <el-table :data="notifications" style="width: 100%" class="my-table" stripe>
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="title" label="留言标题" width="180"></el-table-column>
        <el-table-column prop="content" label="留言内容" width="300"></el-table-column>
        <el-table-column prop="targetUser" label="昵称" width="180"></el-table-column>
        <el-table-column prop="time" label="发布时间" width="180">
          <template slot-scope="scope">
            {{ formatDate(scope.row.time) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="editNotification(scope.row, scope.$index)">编辑</el-button>
            <el-button type="text" size="mini" @click="deleteNotification(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 发布留言按钮 -->
      <el-button type="primary" class="publish-button" @click="openForm()">发布留言消息</el-button>

      <!-- 发布留言表单 -->
      <el-dialog title="发布留言" :visible.sync="showForm" width="30%" @close="resetForm">
        <el-form :model="notification" label-width="80px">
          <el-form-item label="留言标题">
            <el-input v-model="notification.title" required></el-input>
          </el-form-item>
          <el-form-item label="留言内容">
            <el-input type="textarea" v-model="notification.content" required></el-input>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="notification.targetUser" required></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveNotification">发布</el-button>
            <el-button @click="showForm = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      notification: {
        title: '',
        content: '',
        targetUser: ''
      },
      notifications: JSON.parse(localStorage.getItem('notifications')) || [],
      showForm: false,
      editingIndex: 0 
    };
  },
  methods: {
    openForm(notification = null, index = -1) {
      if (notification) {
        this.notification = { ...notification };
        this.editingIndex = index;
      } else {
        this.resetForm();
      }
      this.showForm = true;
    },
    saveNotification() {
      if (this.editingIndex > -1) {
        this.notifications.splice(this.editingIndex, 1, { ...this.notification });
      } else {
        this.notifications.push({
          ...this.notification,
          time: new Date().toISOString().slice(0, 10),
          id: this.notifications.length + 1
        });
      }
      this.updateIds();
      this.updateLocalStorage();
      this.showForm = false;
      this.resetForm();
    },
    editNotification(notification, index) {
      this.openForm(notification, index);
    },
    deleteNotification(notification) {
      const index = this.notifications.indexOf(notification);
      if (index !== -1) {
        this.notifications.splice(index, 1);
        this.updateIds(); // 删除后更新ID
        this.updateLocalStorage();
      }
    },
    resetForm() {
      this.notification = {
        title: '',
        content: '',
        targetUser: ''
      };
      this.editingIndex = -1;
    },
    updateIds() {
      this.notifications.forEach((notification, index) => {
        notification.id = index + 1;
      });
      this.updateLocalStorage();
    },
    updateLocalStorage() {
      localStorage.setItem('notifications', JSON.stringify(this.notifications));
    },
    formatDate(value) {
      if (!value) return '';
      const date = new Date(value);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    }
  }
};
</script>

<style scoped>
/* 外部容器样式 */
.notification-view {
  display: flex;
  justify-content: center; /* 水平居中 */
  padding: 20px;
}

/* 卡片样式 */
.el-card {
  width: 90%; /* 设置卡片宽度 */
  max-width: auto; /* 设置最大宽度 */
}

/* 标题样式 */
.title {
  margin-bottom: 20px; /* 底部边距 */
  font-size: 15px; /* 字体大小 */
  border-bottom: 1px solid #e0e0e0; /* 底部边框 */
  padding-bottom: 10px; /* 下内边距 */
  font-weight: normal; /* 正常字体 */
}
/* 表格样式 */
.my-table {
  margin-bottom: 20px; /* 底部边距 */
}

/* 发布按钮样式 */
.publish-button {
  margin-top: 20px; /* 顶部边距 */
}

/* 横线样式 */
.line {
  border: none;
  border-top: 1px solid #e0e0e0; /* 使用与列表下方横线相同的颜色 */
  margin-top: 20px; /* 距离标题下方的距离 */
  margin-bottom: 20px; /* 距离表格上方的距离 */
}
</style>